<!-- 弹框表格 -->
<template>
  <el-dialog
    v-if="useModalTable"
    v-el-drag-dialog="isElDragDialog"
    :visible.sync="dialogVisible"
    v-bind="$attrs"
    :close-on-click-modal="closeOnClickModal"
    :append-to-body="appendBody"
    :fullscreen="fullscreen"
  >
    <template #title>
      <div class="dialog-title" @dblclick="setFullscreen">
        <span class="title">{{ $attrs.title }}</span>
        <svg-icon class="fullscreen" :icon-class="fullscreen ? 'minimize':'fullscreen'" @click="setFullscreen" />
      </div>
    </template>
    <slot name="form" />
    <m-table
      ref="form"
      v-bind="dataGrid.tableAttrs"
      :list="dataGrid.data"
      :columns="dataGrid.columns"
      :pagination="dataGrid.pagination"
      :config="dataGrid.config"
      v-on="$listeners"
      @handle-pagination-change="(pagination) => $emit('handle-pagination-change',pagination)"
    >
      <template #action="{scope}">
        <slot name="action" :scope="scope" />
      </template>
    </m-table>
    <slot name="bottom" />
  </el-dialog>
</template>

<script>

// 拖拽弹框指令
import elDragDialog from "@/directive/el-drag-dialog";

export default {
  name: "ModalForm",
  directives: { elDragDialog },
  props: {
    // 是否显示
    visible: {
      type: Boolean,
      default: false,
      required: true
    },
    // 是否可以通过点击 modal 关闭 Dialog
    closeOnClickModal: {
      type: Boolean,
      default: false
    },
    // Dialog 自身是否插入至 body 元素上。嵌套的 Dialog 必须指定该属性并赋值为 true
    appendBody: {
      type: Boolean,
      default: false
    },
    // 弹框是否可拖拽
    isElDragDialog: {
      type: Boolean,
      default: true
    },
    // 表格配置
    dataGrid: {
      type: Object,
      require: true,
      default: () => {
        return {
          visible: false,
          loading: false,
          columns: [],
          data: [],
          pagination: {
            hidden: 1,
            pageNum: 1,
            pageSizes: [50, 100, 150],
            pageSize: 50,
            total: 0,
            pageCount: 0
          },
          tableAttrs: {}
        };
      }
    }
  },
  data() {
    return {
      // 是否全屏
      fullscreen: false,
      dialogVisible: false,
      // 是否需要使用组件 (控制引入组件 初始化时不需要加载该组件)
      useModalTable: false
    };
  },
  // 同步父组件关闭弹框
  watch: {
    dialogVisible(val) {
      this.$emit("update:visible", val);
      if (!this.useModalTable && val) {
        this.useModalTable = val;
      }
    },
    visible(val) {
      this.dialogVisible = val;
    }
  },
  mounted() {

  },
  methods: {
    setFullscreen() {
      this.fullscreen = !this.fullscreen;
    }
  }
};
</script>

<style scoped lang="scss" src="./index.scss"></style>
